<template>
  <section>
  	<div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
  		<span class="title">检索管理</span>
  		<div class="body">
  			<span>年级:</span>
        <select class="select" v-model="gradeSelect" @change="getClassData()" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in gradeOption" :label="item" :value="key"></option>
        </select>
        <span>班级:</span>
        <select class="select" v-model="classSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in classOption" :label="item" :value="item"></option>
        </select>
  			<span>路线名称:</span>
  			<select class="longSelect" v-model="lineSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
  				<option v-for="(item, key) in lineOption" :label="item" :value="key + 1"></option>
  			</select>
        <span>上下车站点:</span>
        <select class="longSelect" v-model="siteSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in siteOption" :label="item.siteName" :value="item.siteId"></option>
        </select>
  		</div>
  		<div class="center">
  			<span>周日饭堂就餐:</span>
  			<select class="select" v-model="eatSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
  				<option v-for="item in eatOption" :label="item.label" :value="item.label"></option>
  			</select>
        <input type="text" class="text" placeholder="请输入学生姓名" v-model="studentName">
        <el-button type="primary" @click="getTableData" size="small">搜索</el-button>
        <el-button type="primary" @click="clearSearch" size="small">重置</el-button>
        <div class="right">
          <a :href="this._httpUrl + `schoolbus/manage/namelist/export?yxt-xtoken=${exportUrl}`">
            <el-button type="primary" size="small">导出</el-button>
          </a>
        </div>
  		</div>
  		<div class="bottom">
  		</div>
  	</div>

  	<div class="model list">
      <img :src="IMGBASE64.CHENGCHEMINGDAN2X" class="pink">
  		<span class="title">乘车名单</span>
  		<div class="kong"></div>
  		<template>
  			<el-table :data="tableData">
  				<el-table-column prop="grade" label="年级" align="center" width="80"></el-table-column>
  				<el-table-column prop="clazz" label="班号" align="center" width="70"></el-table-column>
  				<el-table-column prop="studentId" label="学号" align="center" width="70"></el-table-column>
  				<el-table-column prop="studentName" label="姓名" align="center" min-width="120"></el-table-column>
  				<el-table-column prop="sex" label="性别" align="center" width="70"></el-table-column>
  				<el-table-column prop="lineName" label="路线名称" align="center" min-width="150" :show-overflow-tooltip='true'></el-table-column>
  				<el-table-column prop="siteName" label="上下车站点" align="center" min-width="150"></el-table-column>
  				<el-table-column prop="phone1" label="联系电话1" align="center" min-width="104" :show-overflow-tooltip='true'></el-table-column>
  				<el-table-column prop="phone2" label="联系电话2" align="center" min-width="104" :show-overflow-tooltip='true'></el-table-column>
  				<el-table-column prop="sundayEat" label="周日饭堂就餐" width="122" align="center"></el-table-column>
  			</el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
  		</template>
  	</div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      exportUrl: null,
      gradeSelect: null,
      gradeOption: [],
      classSelect: null,
      classOption: [],
      lineSelect: null,
      lineOption: [],
      siteSelect: null,
      siteOption: [],
      eatSelect: null,
      tableData: [],
      total: 0,
      page: 1,
      paging: true,
      studentName: null,
      eatOption: [{
        label: '是',
        value: 1
      },
      {
        label: '否',
        value: 2
      }],
      tablemsg: [{
        num: '1',
        grade: '一年级',
        class: '4',
        id: '1',
        name: '欧阳俊逸',
        sex: '男',
        line: '大沥黄岐金沙湾线',
        station: '中海金沙湾',
        phone1: '13622222299',
        phone2: '13622222999',
        eat: '是'
      },
      {
        num: '2',
        grade: '一年级',
        class: '4',
        id: '1',
        name: '欧阳俊逸',
        sex: '男',
        line: '大沥黄岐金沙湾线',
        station: '中海金沙湾',
        phone1: '13622222299',
        phone2: '13622222999',
        eat: '是'
      },
      {
        num: '3',
        grade: '一年级',
        class: '4',
        id: '1',
        name: '欧阳俊逸',
        sex: '男',
        line: '大沥黄岐金沙湾线',
        station: '中海金沙湾',
        phone1: '13622222299',
        phone2: '13622222999',
        eat: '是'
      }]
    }
  },
  mounted () {
    this.getGradeData()
    this.getLineData()
    this.getSiteData()
    this.getTableData()
    this.exportUrl = this._exportUrl()
  },
  methods: {
    handleCurrentChange (val) {
      this.page = val
      this.getTableData()
    },
    getGradeData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'public/grade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getClassData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'public/class/query?grade=' + this.gradeSelect, {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.classOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getLineData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/lineAndTeacher', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          for (var i = 0; i < response.data.data.length; i++) {
            this.lineOption.push(response.data.data[i].lineName)
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getSiteData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/site/areaAndSite', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.siteOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getTableData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/namelist', {page: (this.page), rows: 20, grade: this.gradeSelect, clazz: this.classSelect, lineId: this.lineSelect, siteId: this.siteSelect, sundayEat: this.eatSelect, studentName: this.studentName}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = response.data.data.rows
          this.total = response.data.data.total
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].num = i + 1
            for (var j in this.gradeOption) {
              if (this.tableData[i].grade === j) {
                this.tableData[i].grade = this.gradeOption[j]
              }
            }
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    // getSearchData () {
    //   let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
    //   let _cookie = document.cookie.split(';')
    //   let _cookieArray = []
    //   _cookie.forEach(v => {
    //     let _d = v.split('=')
    //     _cookieArray.push({
    //       key: _d[0],
    //       value: _d[1]
    //     })
    //   })
    //   if (this.gradeSelect !== null || this.classSelect !== null || this.lineSelect !== null || this.siteSelect !== null || this.eatSelect !== null || this.studentName !== null) {
    //     if (this.gradeSelect !== null) {
    //       this.$http.post(httpUrl + 'schoolbus/manager/query', {grade: this.gradeSelect, clazz: this.classSelect, lineId: this.lineSelect, siteId: this.siteSelect, sundayEat: this.eatSelect, studentName: this.studentName}, {'headers': {'yxt-xtoken': _cookieArray[0].value}}).then(function (response) {
    //         if (response.ok) {
    //           this.tableData = response.data.data.rows
    //           this.paging = false
    //           for (var i = 0; i < this.tableData.length; i++) {
    //             this.tableData[i].num = i + 1
    //             for (var j in this.gradeOption) {
    //               if (this.tableData[i].grade === j) {
    //                 this.tableData[i].grade = this.gradeOption[j]
    //               }
    //             }
    //           }
    //         }
    //       })
    //     } else {
    //       this.$http.post(httpUrl + 'schoolbus/manager/query', {grade: this.gradeSelect, clazz: this.classSelect, lineId: this.lineSelect, siteId: this.siteSelect, sundayEat: this.eatSelect, studentName: this.studentName}, {'headers': {'yxt-xtoken': _cookieArray[0].value}}).then(function (response) {
    //         if (response.ok) {
    //           this.tableData = response.data.data.rows
    //           this.paging = false
    //           for (var i = 0; i < this.tableData.length; i++) {
    //             this.tableData[i].num = i + 1
    //             for (var j in this.gradeOption) {
    //               if (this.tableData[i].grade === j) {
    //                 this.tableData[i].grade = this.gradeOption[j]
    //               }
    //             }
    //           }
    //         }
    //       })
    //     }
    //   } else {
    //     this.getTableData()
    //     this.paging = true
    //   }
    // },
    clearSearch () {
      this.gradeSelect = null
      this.classSelect = null
      this.lineSelect = null
      this.siteSelect = null
      this.eatSelect = null
      this.studentName = null
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .retrieval{
    .body{
      span{
      	margin-left: 5%;
      }
      span:first-child{
      	margin-left: 0;
      }
      .longSelect{
        width: 15%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .select{
        width: 13%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .right{
        width: 25%;
        float: right;
				&-text{
					width: 58%;
					border: 0;
					border-bottom: 1px solid #D7D7D7;
				}
				.search{
					background: #00A0E8;
					border: 0;
					border-radius: 2px;
					color: #fff;
					padding: 5px 15px;
				}
      }
    }
    .center{
    	padding: 20px 10px 10px 120px;
    	span{
    		margin-left: 11%;
    	}
    	span:first-child{
    		margin-left: 0;
    	}
      .longSelect{
        width: 13%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
    	.select{
    	  width: 13%;
    	  border: 0;
    	  border-bottom: 1px solid #D7D7D7;
    	}
      .text{
        margin-left: 5%;
        border: 1px solid #D8DCE5;
        padding: 5px 15px;
        border-radius: 3px;
        color: #5a5e66;
      }
      .text:hover{
        border: 1px solid #B4BCCC;
      }
      .right{
        margin-left: 2%;
        display: inline-block;
      }
    }
    .bottom{
    	.text{
    		border: 0;
    		border-bottom: 1px solid #D7D7D7;
    	}
    	.right{
				margin-left: 2%;
				display: inline-block;
    	}
    }
  }

  .kong{
  	padding: 20px;
  }

  .list{
  	.pink{
  	  position: absolute;
  	  left: 2%;
  	  top: -20px;
  	}
  	.title{
  	  margin-left: 11%;
  	}
  }
</style>
